<template>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="db">
		<!-- 类型统计 -->
		<div id="main_1" ref="shiyan"></div>
		<!-- 价格统计 -->

	</div>


</template>

<script>
	export default {
		data() {
			return {}
		},
		mounted() {
			this.getTable();
		},
		methods: {
			getTable(){
				var s = this.$echarts.init(this.$refs.shiyan);
				this.$http.get("http://localhost:8989/dlist").then(res=>{
					console.log(res);
					if (res.data.status !== 200) return this.$message.error("获取用户列表失败");
					console.log( res.data.data);
					var option = {
						title: {
							text: '现有图书组成饼状图',
							// subtext: 'Fake Data',
							left: 'center'
						},
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						series: [{
							name: '详情',
							type: 'pie',
							radius: '50%',
							data: res.data.data,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					s.setOption(option);
					console.log(res.data.data)
					
				}).catch(e=>{
					console.log(e);
				})
			},
			LintEcahrt() {
				
				console.log(s);
				
				
			}
		}
	}
</script>

<style scoped="scoped">
	#db {
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
		width: 50%;
		height: %;
	}

	#main_1 {
		position: absolute;
		width: 80%;
		height: 80%;
		left: 15%;
		top: 10%;
	}

	/* #main_2{
		position: absolute;
		width: 40%;
		height: 40%;
		left: 55%;
		top: 10%;
		background-color: #000000;
	}
	#main_3{
		position: absolute;
		width: 40%;
		height: 40%;
		left: 15%;
		top: 50%;
		background-color: #0077AA;
	}
	#main_4{
		position: absolute;
		width: 40%;
		height: 40%;
		left: 55%;
		top: 50%;
		background-color: green;
	}
	 */
</style>
